<!-- 广告资源 -->
<template>
  <div class="pad-content-box">
    <div class="t-right padding-top-15">
      <el-button type="primary" size="mini" v-if="!FormDis() && model.projectStatus == 1" @click="approveSubmit">批量提交</el-button>
      <el-button type="primary" size="mini" v-if="!FormDis() && model.projectStatus == 2" @click="Approve">批量提审</el-button>
      <el-button type="primary" size="mini" @click="m_IsNotActive = !m_IsNotActive" v-if="isPageEdit">
        {{ !m_IsNotActive ? '未生效版本' : '已生效版本' }}
      </el-button>
    </div>
    <el-collapse v-model="m_ActiveNames">
      <!-- <el-collapse-item name="1">
        <template slot="title">
          <div class="font-size-16 font-weight-700 padding-left-10">楼内广告资源</div>
        </template>
        <el-form label-width="200px" ref="m_Form" :model="m_BuildInventory" size="small" label-position="right">
          <el-row>
            <el-col :span="8">
              <el-form-item label="电梯数字广告位数" prop="elevatorDigitalAdNum" :rules="[{ required: true, pattern: '^\\d+$', message: '只能输入数字', trigger: 'change' }]">
                <el-input v-model="m_BuildInventory.elevatorDigitalAdNum" maxlength="9" :disabled="FormDis()" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电梯框架广告位数" prop="elevatorFrameAdNum" :rules="[{ required: true, pattern: '^\\d+$', message: '只能输入数字', trigger: 'change' }]">
                <el-input v-model="m_BuildInventory.elevatorFrameAdNum" maxlength="9" :disabled="FormDis()" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="楼内其他框架广告位数" prop="otherFrameAdNum" :rules="[{ required: true, pattern: '^\\d+$', message: '只能输入数字', trigger: 'change' }]">
                <el-input v-model="m_BuildInventory.otherFrameAdNum" maxlength="9" :disabled="FormDis()" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="楼内其他数字广告位数" prop="otherDigitalAdNum" :rules="[{ required: true, pattern: '^\\d+$', message: '只能输入数字', trigger: 'change' }]">
                <el-input v-model="m_BuildInventory.otherDigitalAdNum" maxlength="9" :disabled="FormDis()" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="楼内其他广告位数" prop="otherAdNum" :rules="[{ required: true, pattern: '^\\d+$', message: '只能输入数字', trigger: 'change' }]">
                <el-input v-model="m_BuildInventory.otherAdNum" maxlength="9" :disabled="FormDis()" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div style="text-align: right">
          <el-button v-if="!FormDis()" size="mini" type="primary" @click="BuildSave()">保存</el-button>
        </div>
      </el-collapse-item> -->

      <el-collapse-item name="2">
        <template slot="title">
          <div class="flex justify-between align-centers" style="width: 100%">
            <div>
              <span class="font-size-16 padding-left-10 font-weight-700">广告资源</span>
            </div>
            <div class="margin-right-10">
              <el-button v-if="!FormDis()" size="mini" type="primary" @click.stop="AddClick">添加</el-button>
            </div>
          </div>
        </template>
        <el-form :model="item" :ref="`bigAd${index}`" :class="index < m_LargeAdverList.length - 1 ? 'margin-bottom-20 border-bottom-F2F2F2' : ''" label-width="180px" size="small" label-position="right" v-for="(item, index) in m_LargeAdverList" :key="item.primaryKey">
          <el-row>
            <el-col :span="8">
              <el-form-item label="广告位名称" prop="adSize" :rules="[{ required: true, message: '请输入广告位名称', trigger: 'blur' }]">
                <el-input v-model="item.locationDesc" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="资产编码">
                <el-input disabled v-model="item.assetCode" placeholder="自动生成" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="广告位类型" prop="adType" :rules="[{ required: true, message: '请选择广告位类型', trigger: 'change' }]">
                <el-select v-model="item.adType" :disabled="FormDis(item)" placeholder="请选择">
                  <el-option v-for="item in m_adTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- <el-input v-model="item.adType" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="媒体类型" prop="mediaType" :rules="[{ required: true, message: '请选择媒体类型', trigger: 'change' }]">
                <el-select v-model="item.mediaType" :disabled="FormDis(item)" placeholder="请选择">
                  <el-option v-for="item in m_mediaTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- <el-input v-model="item.adType" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="广告位尺寸" prop="adSize" :rules="[{ required: true, message: '请输入广告位尺寸', trigger: 'blur' }]">
                <el-input v-model="item.adSize" :disabled="FormDis(item)" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="广告位数量" prop="adNum" :rules="[{ required: true, message: '请输入广告位数量', trigger: 'change' }]">
                <el-input v-model="item.adNum" onkeyup="this.value=this.value.replace(/\D|^0/g,'')" maxlength="9" :disabled="FormDis(item)" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="位置类型" prop="locationType" :rules="[{ required: true, message: '请选择位置类型', trigger: 'change' }]">
                <el-select v-model="item.locationType" :disabled="FormDis(item)" placeholder="请选择">
                  <el-option v-for="item in m_locationTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- <el-input v-model="item.locationType" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input> -->
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item label="位置描述" prop="adSize" :rules="[{ required: true, message: '请输入位置描述', trigger: 'blur' }]">
                <el-input v-model="item.locationCode" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <!-- :rules="[{ required: true, message: '请输入面向空间', trigger: 'blur' }]" -->
              <el-form-item label="面向空间" prop="adSize">
                <el-input v-model="item.spaceAddress" :disabled="FormDis(item)" placeholder="请输入" clearable>
                  <el-button slot="append" type="primary" @click="ShowMap(index)">地图 </el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="广告位状态" prop="adSize" :rules="[{ required: true, message: '请选择广告位状态', trigger: 'change' }]">
                <el-select v-model="item.adStatus" :disabled="FormDis(item)" placeholder="请选择">
                  <el-option v-for="item in m_adStatusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- <el-input v-model="item.adStatus" :disabled="FormDis(item)" placeholder="请输入" clearable></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="广告位图片">
                <div style="display: flex; align-items: center">
                  <el-upload :disabled="FormDis(item)" action accept=".png,.jpg,.Png,.Jpg" :show-file-list="false" :http-request="event => beforeupload(event.file, item)" class="avatar-uploader">
                    <template v-if="!FormDis(item) || (item.businessAttachmentParam && item.businessAttachmentParam.length && item.businessAttachmentParam[0].fileUrl)">
                      <img v-if="item.businessAttachmentParam && item.businessAttachmentParam.length && item.businessAttachmentParam[0].fileUrl" :src="item.businessAttachmentParam[0].fileUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </template>
                    <!-- <el-button v-if="!FormDis(item)" type="primary" style="margin-right: 10px" plain size="mini">上传</el-button> -->
                  </el-upload>
                  <!-- <el-button type="primary" size="mini" plain @click="downPicture(item)">查看</el-button> -->
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="text-align: right">
                <el-button v-if="!FormDis(item)" size="mini" v-show="!item.isAdd" @click="TearDown(item)" type="warning" plain>拆除</el-button>
                <el-button v-if="!FormDis(item)" size="mini" @click="Save(item, index)" type="primary" plain>保存</el-button>
                <el-button v-if="!FormDis(item)" size="mini" @click="Del(item, index)" type="danger" plain>删除</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <AddressBMap :mapVisible="m_Map.mapDialog" v-on:mapLocationClose="m_Map.mapDialog = false" v-on:mapLocationSave="mapLocationSave"></AddressBMap>
  </div>
</template>
<script>
  import projectInfoApi from '../../../api/projectInfo';
  import { uploadPhoto } from '@/api';
  import AddressBMap from '@/common/components/AddressBMap';
  import { requestTips, askDialog } from '../../../assets/util';
  export default {
    components: { AddressBMap },
    data() {
      return {
        m_Map: {
          mapDialog: false,
          editIndex: -1,
        },
        m_IsReview: true, //审核中
        m_WorkMsg: null,
        m_IsNotActive: false, //是否未生效
        m_LargeAdverList: [], //大型广告资源列表
        m_LargeAdverForm: {
          isAdd: true,
          assetCode: null, //资产编码
          mediaType: null, //媒体类型
          adType: null, //广告位类型
          adNum: null, // 广告位数量
          adSize: null, //广告位尺寸
          locationType: null, //位置类型
          locationDesc: null, //位置描述
          locationCode: null, //位置编码
          spaceAddress: null, //面向空间
          longitude: null, //经度
          latitude: null, //维度
          adPicture: null, //广告位图片
          businessAttachmentParam: [],
          adStatus: null, //广告位状态
        },
        //楼内广告资源
        m_BuildInventory: {
          elevatorDigitalAdNum: null, //电梯数字广告位数
          elevatorFrameAdNum: null, //电梯框架广告位数
          otherFrameAdNum: null, //楼内其他框架广告位数
          otherDigitalAdNum: null, //楼内其他数字广告位数
          otherAdNum: null, //楼内其他广告位数
        },
        m_adStatusList: [
          {
            value: 0,
            label: '可用',
          },
          {
            value: 1,
            label: '不可用',
          },
        ],
        m_locationTypeList: [
          {
            value: 0,
            label: '室内',
          },
          {
            value: 1,
            label: '室外',
          },
        ],
        m_adTypeList: [
          {
            value: 0,
            label: '发光标识',
          },
          {
            value: 1,
            label: '亚克力板',
          },
          {
            value: 2,
            label: '广告布',
          },
          {
            value: 3,
            label: '立地灯箱',
          },
          {
            value: 4,
            label: '外立面广告位',
          },
          {
            value: 5,
            label: '覆壁灯箱',
          },
          {
            value: 6,
            label: '灯箱',
          },
          {
            value: 7,
            label: '电梯轿厢广告',
          },
          {
            value: 8,
            label: '门头logo',
          },
        ],
        m_mediaTypeList: [
          {
            value: 0,
            label: '数字',
          },
          {
            value: 1,
            label: '框架',
          },
        ],
        m_ActiveNames: ['1', '2'],
        model: {},
        projectKey:this.$route.query.projectKey || localStorage.getItem("projectKey")
      };
    },
    filters: {},
    //监控data中的数据变化
    watch: {
      m_IsNotActive: {
        immediate: false,
        deep: true,
        handler(val) {
          this.GetData();
        },
      },
    },

    computed: {
      isPageEdit() {
        return !this.$route.query.taskId;
      },
    },

    mounted() {
      this.GetData();
      this.getProjectInfo();
    },

    methods: {
      async getProjectInfo() {
        let res = await projectInfoApi.apiProjectDetail({
          primaryKey:this.projectKey
        });
        this.model = res;
      },
      //状态为拆除的不可编辑
      FormDis(item) {
        if (this.m_IsReview) return this.m_IsReview;
        if (item) return !this.m_IsNotActive || item.status == 2;
        else return !this.m_IsNotActive;
      },
      approveSubmit() {
        askDialog('是否确定页面数据已全部保存?', async () => {
          let data = {
            workType: 2,
            projectKey: this.projectKey,
            workId: this.m_WorkMsg.workId,
          };
          const res = await projectInfoApi.summitAuditAndSuccess(data);
          requestTips(res, () => {
            this.getProjectInfo();
          });
        });
      },
      // 提审
      Approve() {
        let pathUrl = {
          name: 'arraignment-advertising',
          query: {
            ...this.$route.query,
            workId: this.m_WorkMsg.workId,
          },
        };
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
      ShowMap(index) {
        this.m_Map.editIndex = index;
        this.m_Map.mapDialog = true;
      },
      //小区地址选择回调
      mapLocationSave(e) {
        this.m_LargeAdverList[this.m_Map.editIndex].spaceAddress = e.address;
        this.m_LargeAdverList[this.m_Map.editIndex].longitude = e.longitude;
        this.m_LargeAdverList[this.m_Map.editIndex].latitude = e.latitude;
        this.m_Map.mapDialog = false;
      },
      GetNotActive() {
        projectInfoApi.proclargeadlist({ projectKey: this.projectKey, workId: this.m_WorkMsg.workId, status: 1 }).then(res => {
          this.m_LargeAdverList = res.rows;
        });
        projectInfoApi.procadlist({ projectKey: this.projectKey, workId: this.m_WorkMsg.workId, status: 1 }).then(res => {
          if (res.rows.length) {
            for (let key in res.rows[0]) {
              if (typeof res.rows[0][key] == 'number') res.rows[0][key] = res.rows[0][key].toString();
            }
            this.m_BuildInventory = res.rows[0];
          } else {
            for (let key in this.m_BuildInventory) {
              this.m_BuildInventory[key] = null;
            }
          }
        });
      },

      GetData() {
        if (this.m_IsNotActive) {
          // if (this.m_WorkMsg && this.m_WorkMsg.procStatus == 2) {
          //   this.$message.warning('当前资产审核中！');
          //   return;
          // }
          projectInfoApi.getWorkId({ projectKey: this.projectKey, workType: 2 }).then(res => {
            //1-待审核//2-审核中//3-通过//4-不通过
            this.m_IsReview = false;
            if (res.procStatus == 2) {
              this.$message.warning('当前资产审核中！');
              this.m_IsReview = true;
            }

            this.m_WorkMsg = res;
            this.GetNotActive();
          });
        } else {
          projectInfoApi.largeadlist({ projectKey: this.projectKey, status: 1 }).then(res => {
            this.m_LargeAdverList = res.rows;
          });
          projectInfoApi.adlist({ projectKey: this.projectKey, status: 1 }).then(res => {
            if (res.rows.length) {
              for (let key in res.rows[0]) {
                if (typeof res.rows[0][key] == 'number') res.rows[0][key] = res.rows[0][key].toString();
              }
              this.m_BuildInventory = res.rows[0];
            } else
              for (let key in this.m_BuildInventory) {
                this.m_BuildInventory[key] = null;
              }
          });
        }
      },
      //楼内广告 新增/保存
      BuildSave() {
        console.log(this.m_BuildInventory);
        this.$refs['m_Form'].validate(valid => {
          if (valid) {
            if (this.m_BuildInventory.primaryKey) {
              projectInfoApi.procadupdate({ ...this.m_BuildInventory }).then(res => {
                if (res.success) {
                  this.GetData();
                  this.$message.success(res.message);
                } else this.$message.warning(res.message);
              });
            } else {
              projectInfoApi.procadcreate({ ...this.m_BuildInventory, projectKey: this.projectKey, workId: this.m_WorkMsg.workId }).then(res => {
                if (res.success) {
                  this.GetData();
                  this.$message.success(res.message);
                } else this.$message.warning(res.message);
              });
            }
          }
        });
      },
      //拆除
      TearDown(item) {
        projectInfoApi.proclargeaddelete({ primaryKey: item.primaryKey, dynamic: 2 }).then(res => {
          projectInfoApi.proclargeadupdate({ primaryKey: item.primaryKey, adStatus: 1 }).then(res => {
            if (res.success) this.GetData();
            else this.$message.warning(res.message);
          });
          // this.GetData();
        });
      },
      //删除
      Del(item, i) {
        // debugger
        if (!item.primaryKey) {
          this.m_LargeAdverList.splice(i, 1);
          return;
        }
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          projectInfoApi.proclargeaddelete({ primaryKey: item.primaryKey, status: 0 }).then(res => {
            this.GetData();
          });
        });
      },
      //大型广告 新增/保存
      Save(item, index) {
        console.log(this.$refs);
        let formName = 'bigAd' + index;
        this.$refs[formName][0].validate(valid => {
          if (valid) {
            if (item.primaryKey) {
              projectInfoApi.proclargeadupdate(item).then(res => {
                if (res.success) {
                  this.GetData();
                  this.$message.success(res.message);
                } else this.$message.warning(res.message);
              });
            } else {
              projectInfoApi.proclargeadcreate({ ...item, projectKey: this.projectKey, workId: this.m_WorkMsg.workId }).then(res => {
                if (res.success) {
                  this.GetData();
                  this.$message.success(res.message);
                } else this.$message.warning(res.message);
              });
            }
          }
        });
      },
      //添加
      AddClick() {
        this.m_LargeAdverList.splice(0, 0, { ...this.m_LargeAdverForm });
      },
      beforeupload(file, item) {
        let loading = this.$loading({
          lock: true,
          text: '上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        uploadPhoto(file).then(res => {
          item.businessAttachmentParam = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key }];
          loading.close();
        });
      },
      downPicture(item) {
        if (item.businessAttachmentParam.length) window.open(item.businessAttachmentParam[0].fileUrl);
        else this.$message.warning('暂未上传图片');
      },
    },
  };
</script>

<style scoped>
  .avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
